﻿<h3>Order</h3>
<ul class="thumbnails">
    <li class="span8">

        <h4>Customer</h4>
        <div class="media" style="margin-top: 15px;">
            <a class="pull-left" data-bind="attr:{href: '/#customer/edit/' + order().Customer().Id()}">
                <img data-bind="attr:{src: order().Customer().ImageUrl() }" alt="" style="width: 80px" class="img-polaroid" />
            </a>
            <div class="media-body">
                <a class="pull-left" data-bind="attr:{href: '/#customer/edit/' + order().Customer().Id()}">
                    <h5 data-bind="text: order().Customer().FullName" style="display: inline"></h5>
                </a>
            </div>
        </div>
    </li>
</ul>
<div class="row" style="margin: 10px">

    <h4>Order Details</h4>
    <div class="media" style="margin-top: 15px;">
        <a class="pull-left">
            <img data-bind="attr:{src: order().IsPending() ? '/Images/openbox.png' : '/Images/closebox.png'}" alt="" style="width: 80px" class="pull-left" />
        </a>
        <div class="media-body">
            <h5 data-bind="text: 'Reference Number: ' + order().ReferenceId()"></h5>
            <h5 data-bind="text: 'Last modified: ' + order().ModifiedDate(), visible:  order().ModifiedDate() != null"></h5>
            <div class="pull-right">
                <a class="btn btn-success" data-bind="visible: order().IsPending() && order().OrderLines().length > 0, click: changeStatus "><i class="icon-envelope"></i>Deliver</a>
                <a class="btn btn-warning" data-bind="visible: !order().IsPending(), click: changeStatus "><i class="icon-repeat"></i>Back to pending</a>
            </div>
        </div>
    </div>

    <table class="table table-hover">
        <thead data-bind="visible: order().OrderLines().length > 0">
            <tr>
                <th></th>
                <th></th>
                <th>Item Code</th>
                <th>Qty</th>
                <th>Unit Price</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: order().OrderLines">
            <tr>
                <td>
                    <input type="checkbox" data-bind="visible: $parent.order().IsPending(), checked: isSelected" /></td>
                <td>
                    <img data-bind="attr:{src: Item().ImageUrl() }" alt="" style="width: 80px" class="img-rounded" /></td>
                <td><span data-bind="text: Item().ItemCode()"></span></td>
                <td><span data-bind="text: Quantity"></span></td>
                <td><span data-bind="text: Item().Price() + ' €'"></span></td>
                <td><span data-bind="text: Item().Price() * Quantity() + ' €'"></span></td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td />
                <td colspan="2">
                    <div class="btn-group" data-bind="visible: order().IsPending()">
                        <a class="btn btn-primary"><i class="icon-wrench icon-white"></i>Options</a>
                        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a data-bind="click: addOrderLine"><i class="icon-plus"></i>Add</a></li>
                            <li><a data-bind="visible: orderLinesSelectedCount() > 0"><i class="icon-edit"></i>Edit</a></li>
                            <li><a data-bind="click: removeOrderLines, visible: orderLinesSelectedCount() > 0"><i class="icon-trash"></i>Delete</a></li>
                        </ul>
                    </div>
                    <td />
                <td><strong>TOTAL </strong></td>
                <td>
                    <strong>
                        <p data-bind="text: order().TotalAmount() + ' €'"></p>
                    </strong>
                </td>
            </tr>
        </tbody>
    </table>

</div>
